<template>
  <div>
    <div class="display">
      <h1>THE BEST {{ $t('title') }}</h1>
      <h1>THE BEST {{ $t('title') }}</h1>
    </div>
    <div class="ce" />
    <div class="app">
      <div>
        <img :src="avatar + '?imageView2/1/w/80/h/80'" class="avatar-img" />
      </div>
      <div class="app-textcontainer">
        <div class="app-text">
          {{ $t('home.username') }}: {{ name }}
        </div>
        <div class="app-text">
          {{ $t('home.nickname') }}: {{ nickName }}
        </div>
        <div class="app-text">
          {{ $t('home.role') }}:
          <span  
            v-for="role in displayedRoles"  
            :key="role.role"  
          >  
            {{ role.displayName }}  
          </span>  
        </div>
      </div>
    </div>
    <!-- <div class="app-text">
      authorities: {{ authorities }}
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import{ translate } from "@/api/translate";
import { testExprot } from "@/api/excel.js";
export default {
  name: 'Home',
  data(){
    return{    
      translate:'',
      params:{
        from:'en',
        to:'zh',
        q:null
      }
    }

  },
  computed: {
    ...mapGetters(["name", "nickName", "roleKeys", "avatar", "authorities"]),
    displayedRoles() {
      const roleMap = this.$t('roleNames')
      return this.roleKeys.map((role) => ({
        role,
        displayName: roleMap[role] || this.$t('home_home_1'), // 如果角色不在映射中，显示'未知角色'
      }));
    },
  },
  created() {},
  methods: {
    translatemethod(){
      // console.log(this.params)
      // console.log(this.translate)
      translate(this.params).then((response) => {
        // console.log(response)
        this.translate=response.data.trans_result[0].dst
    })
    }

  }
};
</script>

<style lang="scss" scoped>
.display{
  height: 150px;
  padding-top: 10px;
  width: auto;
  text-align: center;
  // margin-top: -55px;
  background-color: rgb(255, 255, 239);
}
.ce {
  border-top: 3px solid rgb(211, 211, 211);
  border-bottom: 3px solid rgb(211, 211, 211);
  margin: 5px;
  padding: 1px;
}
.display h1:nth-of-type(1) {
  z-index: 0;
  line-height: 120px;
  margin-top: 0px;
  color: #fff6ba;
  font-size: 80px;
}
.display h1:nth-of-type(2) {
  z-index: 1;
  margin-top: -175px;
  margin-right: -20px;
  line-height: 120px;
  color: #d1c454;
  font-size: 80px;
}
.app {
  display: flex;
  padding: 20px;
  background-color: rgb(255, 255, 239);
  &-container {
    margin: 30px;
  }
  &-textcontainer {
    border-left: 4px solid rgb(150, 150, 150);
    margin-left: 25px;
  }
  &-text {
    font-size: 30px;
    font-weight: bold;
    color: rgb(150, 150, 150);
    margin-left: 30px;
    margin-top: 30px;
    line-height: 46px;
  }
}
.avatar-img {
  border-radius: 50px;
  padding: 10px;
  width: 250px;
  height: 250px;
}
</style>
